<template>
    <div class="index">
        <div class="indexHeader">
            <div class="one" @click="go()">
                <image class="choosePlaceIcon" style="width:26px;height:30px" src="../../../web/img/local.png"></image>
                <text class="choosePlaceText">{{city}}</text>
            </div>
            <div class="two">
                <image class="searchIco" style="width:36px;height:39px" src="../../../web/img/searchIco.png"></image>
                <input class="writeMsg" placeholder="机油、雨刷大保养来一套" type="text" />
            </div>
            <div class="three">
                <image class="information" style="width:44px;height:44px" src="../../../web/img/shop_store_massage_1.png"></image>
                <text v-show="news" class="newMsg"></text>
            </div>
        </div>
        <div class="indexSec">
            <indexCarousel :carouselAuto="carouselAuto"></indexCarousel>
            <indexMenu></indexMenu>
            <indexNear></indexNear>
        </div>
        <indexFooter></indexFooter>
        <div v-if="fog" class="indexFog">
        </div>
        <div v-if="fog" class="pointInfor">
            <text class="msg">定位您当前的位置为{{city}}市，是否将您当前城市切换为{{city}}市</text>
            <div @click="changeTheAddress($event)" class="btns">
                <div class="btn btn1">不切换</div>
                <div class="btn btn2">切换城市</div>
            </div>
        </div>
    </div>

</template>

<script>
    import indexCarousel from "../src/components/indexPage/indexCarousel"
    import indexMenu from "../src/components/indexPage/indexMenu"
    import indexNear from "../src/components/indexPage/indexNear"
    import indexFooter from "../src/components/indexPage/indexFooter"
    export default {
        name: "index",
        components:{
            indexCarousel,
            indexMenu,
            indexNear,
            indexFooter,
        },
        data(){
          return{
              city:"北京",
              fog:true,
              news:true,
              carouselAuto:true,
          }
        },
        mounted:function(){
        },
        methods:{
            // 点击切换城市定位,隐藏弹出框
            changeTheAddress(e){
                this.fog=false;
                if (e.target.className==="btn btn2 weex-ct weex-div"){
                    this.city="NewYoke"
                }
            },
            go(){
                const info = {
                    statusId:1
                };
                localStorage.setItem("whereFrom",JSON.stringify(info));
                this.$router.push("/chooseAddress");
            }
        }
    }
</script>

<style scoped>
.index{
    flex:1;
    width:100%;
    overflow: hidden;
}
    .indexSec{
        flex:1;
        overflow: scroll;
    }

    /*
    遮罩层+地址弹出框css
    */
.indexFog{
    height:100%;
    width:100%;
    background: #000;
    opacity: .4;
    position: fixed;
    left:0;
    top:0;
    z-index: 999;
}
.pointInfor{
    background: #fff;
    position: fixed;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    z-index: 999;
    padding: 58px 34px;
    border-radius:20px;
    width:440px;
}
.msg{
    font-size: 26px;
    color:#666;
}
.btns{
    flex-direction: row;
}
.btn{
    flex:1;
    text-align: center;
    text-align: center;
    margin-top:60px;
    color:#999;
    font-size: 28px;
    font-weight: 600;
}
.btn2{
    color:#33c179;
}
    /*
    header css样式
    */
.indexHeader{
    flex-direction: row;
    width:100%;
    height:90px;
    box-shadow:0 2px 5px #bbb;
    align-items: center;
}
.one{
    flex-direction: row;
    align-items: center;
}
.choosePlaceIcon{
    margin:0 18px 0 25px;
}
.choosePlaceText{
    font-size: 32px;
    color:#79d1a0;
    font-weight:600;
    width:88px;
    overflow: hidden;
    white-space: nowrap;
}
.two{
    position: relative;
    margin-left:32px;
}
.searchIco{
    position: absolute;
    left:20px;
    top:6px;
    z-index:1;
}
.writeMsg{
    border:1px solid #d2d2d2;
    height:50px;
    width:450px;
    border-radius: 35px;
    outline: none;
    text-indent: 60px;
}
input::-webkit-input-placeholder{
    color:#999;
    font-weight: 600;
    text-indent: 60px;
}
.three{
    margin-left:40px;
    position: relative;
}
.newMsg{
    position: absolute;
    right:3px;
    top:-3px;
    border-radius:50%;
    background: #f51b1b;
    z-index: 999;
    display: block;
    width:16px;
    height:16px;
}
</style>